<template>
  <div class="commonBoxmp">
    <TableV2
      :apiFunction="listDept"
      class="flex1"
      dataKey="data"
      ref="tableV2Ref"
      
      :columns="state.columnData"
    >
      <template #tableHeader>
        <div class="jcb aic w100">
          <el-button type="primary" @click="handleAdd">添加部门</el-button>
        </div>
      </template>

      <template #operation>
        <el-table-column label="操作" fixed="right" width="160px" align="left">
          <template #default="scope">
            <el-link type="primary" @click="handleUpdate(scope.row)"
              >修改</el-link
            >
            <el-link type="primary" class="mx5" @click="handleDelete(scope.row)"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </template>
    </TableV2>
 <addOrEdit v-model="state.userVisible" :id="deptId" @update="getList"/>
 
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, getCurrentInstance, onMounted, shallowRef } from "vue";
import { useRouter, useRoute } from "vue-router";
import Column from "/@ts/components/table/Column";
import selectDict from "/@/components/selectDict/index.vue";
import DictTag from "/@/components/DictTag/index.vue";
import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
import {
  listDept,
  getDept,
  delDept,
  addDept,
  updateDept,
  listDeptExcludeChild,
} from "/@ts/axios/urlApi/system/dept";
import {
AddOrEdit
} from './component'
import formatTool from "/@ts/hooks/format";
const router = useRouter();
const route = useRoute();
const { parseTime, addDateRange, handleTree, getDict } = formatTool();
let dict: any = reactive({
  sys_job_status: [],
});
onMounted(async () => {
  dict.sys_job_status = await getDict("sys_job_status");
});
const tableV2Ref = ref();
const state: any = reactive({
  typeOptions: [],
  // 表格基础配置 start
  form: {},
  title: "",
  rules: {
    dictLabel: [
      { required: true, message: "数据标签不能为空", trigger: "blur" },
    ],
    dictValue: [
      { required: true, message: "数据键值不能为空", trigger: "blur" },
    ],
    dictSort: [
      { required: true, message: "数据顺序不能为空", trigger: "blur" },
    ],
  },
  dateRange: [], //时间范围筛选

  height: 0,
  tableData: [],
  deptOptions: [],
  columnData: [
    {
      label: "部门名称",
      prop: "deptName",
      visible: true,
    },
    {
      label: "排序",
      prop: "orderNum",
      visible: true,
    },

    {
      label: "备注",
      prop: "remark",
      visible: true,
    },

    {
      label: "状态",
      prop: "status",
      visible: true,
      render: ({ row }: any) => {
        return (
          <DictTag
            values={row.status}
            dataType="primary"
            options={dict.sys_job_status}
          ></DictTag>
        );
      },
    },
    {
      label: "创建时间",
      prop: "createTime",
    },
  ],
  loading: false,
  defaultDictType: "",
  // 表格基础配置 end
});
// 表格基础配置 start


/** 搜索按钮操作 */
const handleQuery = () => {
  // queryParams.pageNum = 1;
  getList();
};
// 表格基础配置 end
const handleCascader = (val: any) => {
  if (val) {
    state.form.parentId = val[val.length - 1];
  }
};

const handleDelete = (row: any) => {
  const deptId = row.deptId;
  ElMessageBox.confirm('是否确认删除编号为"' + row.deptName + '"的数据项？')
    .then(function () {
      return delDept(deptId);
    })
    .then(() => {
      ElMessage.success("删除成功");
      getList();
    })
    .catch(function () {});
};
/** 修改按钮操作 */
const deptId = shallowRef("");
const handleUpdate = (row: any) => {
  deptId.value = row.deptId;
  state.userVisible = true;

};
const handleAdd = () => {

    deptId.value = '';

  state.userVisible = true;
};
// 表格基础配置 end

const getTypeList = () => {

};
//查询用户列表
const getList = () => {
    tableV2Ref.value.getList()

};
const ruleFormRef = ref<FormInstance>();
onMounted(() => {
  getList();
});
</script>

<style scoped lang="scss"></style>
